<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="2" :xs="24" v-if="queryParams.unitId">
        <el-card class="box-card floor-card" shadow="hover" style="height: calc(100vh - 100px)">
          <div slot="header" class="clearfix" style="text-align: center;">
            <span class="floor-title">楼层</span>
          </div>
          <div class="floor-wrapper">
            <div class="scroll-arrow up" @click="scrollFloor('up')">
              <i class="el-icon-arrow-up"></i>
            </div>
            <el-scrollbar class="floor-scrollbar">
              <el-menu :default-active="activeFloor" class="floor-menu" @select="handleFloorSelect">
                <el-menu-item v-for="floor in floorList" :key="floor.id" :index="floor.id + ''">
                  <span>{{ floor.floorName }}</span>
                </el-menu-item>
              </el-menu>
            </el-scrollbar>
            <div class="scroll-arrow down" @click="scrollFloor('down')">
              <i class="el-icon-arrow-down"></i>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="queryParams.unitId ? 22 : 24" :xs="24">
        <div class="content-wrapper">
          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="78px" class="search-form">
            <el-form-item label="校区" prop="cellId">
              <el-select v-model="queryParams.cellId" placeholder="请选择校区" @change="handleCellChange">
                <el-option v-for="dict in cellList" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="楼栋" prop="unitId">
              <el-select v-model="queryParams.unitId" placeholder="请选择楼栋" clearable @change="handleUnitChange">
                <el-option v-for="dict in unitList" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="房间" prop="roomName">
              <el-input v-model="queryParams.roomName" placeholder="请输入房间名称" @keyup.enter.native="handleQuery" />
            </el-form-item>
        <!--    <el-form-item label="MAC" prop="mac">
              <el-input v-model="queryParams.mac" placeholder="请输入MAC地址" @keyup.enter.native="handleQuery" />
            </el-form-item> -->
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" class="search-btn">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>

          <el-row :gutter="10" class="mb8" v-loading="loading" element-loading-text="加载房间中...."
            element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.65)">
            <el-col :span="24">
              <el-card class="box-card main-card" shadow="never">
                <div slot="header" class="clearfix filter-header">
                  <div class="filter-tabs">
                    <div class="filter-tab" :class="{ 'active': queryParams.tenantCount === null }" @click="handleQB">
                      全部 ({{roomStats.totalRooms || 0}})
                    </div>
                    <div class="filter-tab" :class="{ 'active': queryParams.tenantCount === 0 }" @click="handleXZ">
                      闲置 ({{roomStats.idleRooms || 0}})
                    </div>
                    <div class="filter-tab" :class="{ 'active': queryParams.tenantCount === 1 }" @click="handleDQ">
                      在住 ({{roomStats.rentedRooms || 0}})
                    </div>
                  </div>
                </div>
                <el-empty :image-size="100" class="empty-data" :image="emty"
                  v-if="!roomList || roomList.length === 0"></el-empty>
                <div class="room-list" v-else>
                  <el-row :gutter="12">
                    <el-col :span="4" :xs="12" :sm="8" :md="6" :lg="4" v-for="room in roomList" :key="room.id" style="margin-bottom: 16px;">
                      <div class="room-card-container" @click.stop="onclickLock(room)">
                        <el-card class="room-card" :class="{
                          'vacant-background': room.tenantCount == 0,
                          'rented-background': room.tenantCount > 0
                        }" shadow="hover">
                          <div class="card-top">
                            <div v-if="room.batteryLevel" class="battery-wrapper">
                              <battery :capacity="room.batteryLevel"></battery>
                            </div>
                            <div class="room-status-container">
                              <div class="room-status">{{room.tenantCount}}人</div>
                              <div class="room-status" v-if="room.tenantCount > 0">在住</div>
                              <div class="room-status" v-else>闲置</div>
                            </div>
                          </div>
                        <!--  <div class="room-content">
                            <div v-if="!room.batteryLevel && room.mac" class="lock-inactive">
                              <i class="el-icon-warning-outline"></i>
                              <span>锁未激活</span>
                            </div>
                             <div v-if="!room.mac" class="no-lock">
                              <i class="el-icon-lock"></i>
                              <span>无锁</span>
                            </div>
                          </div> -->
                          <div class="room-footer">
                            <span class="room-name">{{room.unitName}}-{{room.floorName}}-{{room.roomName}}</span>
                          </div>
                        </el-card>
                      </div>
                    </el-col>
                  </el-row>
                </div>
                <div class="card-footer" v-if="total > 0">
                  <pagination
                    :total="total"
                    :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"
                    :page-sizes="[30, 60]"
                    layout="total, sizes, prev, pager, next, jumper"
                  />
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>

    <contract-dialog
      :visible.sync="open"
      :title="title"
      :formData="form"
      @refresh="getList"
    />
  </div>
</template>

<script>
import {
  listRoom,
  getRoom,
  delRoom,
  addRoom,
  updateRoom,
  jieBang
} from "@/api/lock/room";
import {
  listHome3,
  getHome,
  addHome,
  updateHome,
  delHome
} from "@/api/lock/home";
import { listCell2 } from "@/api/lock/cell";
import { listUnit2 } from "@/api/lock/unit";
import {
  updateSmartlocksByMac
} from "@/api/lock/smartlocks";
import { getParent1 } from "@/api/system/dept";
import emty from "@/assets/images/emty/暂无数据2.png";
import battery from "./battery.vue";
import { listFloor2 } from "@/api/lock/floor";
import { listContract, getContract } from "@/api/lock/contract";
import ContractDialog from "../contract/components/ContractDialog";
import Pagination from "@/components/Pagination";
import { roomStatistics } from "@/api/lock/menu";

export default {
  name: "Room",
  dicts: ['room_type_id', 'room_status_type', 'del_flag'],
  components: {
    battery,
    ContractDialog,
    Pagination
  },
  data() {
    return {
      emty: emty,
      mengban: false,
      deleteTar: "修改房间",
      loading: true,
      ids: [],
      roomid: null,
      single: true,
      multiple: true,
      showSearch: true,
      total: 0,
      roomList: [],
      activeNames: [],
      title: "",
      open: false,
      updateShow: false,
      openIS: false,
      bangDopen: false,
      cellList: [],
      unitList: [],
      roomStats: {
        totalRooms: 0,
        idleRooms: 0,
        rentedRooms: 0
      },
      queryParams: {
        roomName: null,
        cellId: null,
        unitId: null,
        floorId: null,
        pageNum: 1,
        pageSize: 30,
        contractNo: null,
        contractType: null,
        contractStatus: null,
        tenantCount: null,
        mac: null
      },
      form: {},
      rules: {},
      floorList: [],
      activeFloor: '',
    };
  },
  created() {
    this.getCellList();
    this.getFloorList();
    // 从路由参数中获取状态
    const { tenantCount } = this.$route.query;
    if (tenantCount !== undefined) {
      // 处理 null 值的情况
      this.queryParams.tenantCount = tenantCount === 'null' || tenantCount === null ? null : Number(tenantCount);
    }
    this.getList();
  },
  watch: {
    // 监听路由参数变化
    '$route.query.tenantCount': {
      handler(newVal) {
        if (newVal !== undefined) {
          // 处理 null 值的情况
          this.queryParams.tenantCount = newVal === 'null' || newVal === null ? null : Number(newVal);
          this.getList();
        }
      },
      immediate: true
    }
  },
  methods: {
    /** 查询上级楼栋 */
    getParentLD(row) {
      this.queryParams.type = 3;
      this.queryParams.parentId = row;
      getParent1(this.queryParams).then(response => {
        this.unitList = response.rows;
        this.unitList = this.unitList.map(item => {
          return {
            label: item.deptName,
            value: item.deptId
          }
        });
      });
    },
    /** 楼栋值发生改变时触发*/
    handleLdchange(row) {
      this.form.unitId = null;
      this.getParentLD(row);
    },
    /** 筛选查询全部 */
    handleQB() {
      this.queryParams.tenantCount = null;
      this.getList();
    },
    /** 筛选查询闲置 */
    handleXZ() {
      this.queryParams.tenantCount = 0;
      this.getList();
    },
    /** 筛选查询电量 */
    handleDianL() {
      this.queryParams.tar = 2;
      this.queryParams.tenantCount = undefined;
      this.getList();
    },
    /** 筛选查询到期 */
    handleDQ() {
      this.queryParams.tenantCount = 1;
      this.getList();
    },
    /** 筛选查询三天未开锁 */
    handleHandLock() {
      this.queryParams.tar = 4;
      this.getList();
    },
    //查询上级校区
    getCellList() {
      listCell2().then(response => {
        this.cellList = response.rows.map(item => ({
          label: item.name,
          value: item.id
        }));
        // 不默认选择校区
        this.queryParams.cellId = null;
        this.unitList = [];
        this.getList();
      });
    },
    /** 获取楼栋列表 */
    getUnitList(cellId) {
      if (!cellId) {
        this.unitList = [];
        return;
      }
      listUnit2({ cellId: cellId }).then(response => {
        this.unitList = response.rows.map(item => ({
          label: item.name,
          value: item.id
        }));
        // 不默认选择楼栋
        this.queryParams.unitId = null;
        // 初始化楼层菜单为全部
        this.activeFloor = '';
        this.queryParams.floorId = null;
        this.getList();
      });
    },
    onclickLock(row) {
      // if (!row.mac) {
      //   this.$message({
      //     message: '房间无锁，不能够进入房间！',
      //     type: 'warning'
      //   });
      // } else if (row.mac && !row.batteryLevel) {
      //   this.$message({
      //     message: '锁未激活，请先激活锁设备！',
      //     type: 'warning'
      //   });
      // } else {
        this.$router.push({
          path: "/sb/details",
          query: {id:row.id}
        });
      // }
    },
    deleteRoom() {
      if (this.mengban) {
        this.mengban = false;
        this.deleteTar = "修改房间"
      } else {
        this.mengban = true;
        this.deleteTar = "取消修改"
      }
    },
    generateKey(item) {
      return `${item.cellName}-${item.ldName}-${item.lch}层`;
    },
    /** 查询房态管理列表 */
    getList() {
      this.queryParams.type = null;
      this.loading = true;
      Promise.all([
        listHome3(this.queryParams),
        roomStatistics(this.queryParams)
      ]).then(([listResponse, statsResponse]) => {
        this.roomList = listResponse.rows;
        this.total = listResponse.total;
        this.roomStats = statsResponse.data;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    getld(roomList) {
      var temproomList = roomList;
      var tarLd = [];
      var seenLchs = {};
      for (var i = 0; i < roomList.length; i++) {
        var ldid = roomList[i].ldid;
        var cellid = roomList[i].cellid;
        if (!seenLchs[ldid] && !seenLchs[cellid]) {
          seenLchs[ldid] = true;
          tarLd.push(JSON.parse(JSON.stringify(roomList[i])))
        }
      }
      tarLd.sort(function(a, b) {
        return a.ldName.localeCompare(b.ldName);
      });
      return this.getLc(temproomList, tarLd);
    },
    getLc(roomList, tarLd) {
      for (var i = 0; i < tarLd.length; i++) {
        var lc = [];
        var seenLchs = {};
        for (var j = 0; j < roomList.length; j++) {
          let lch = roomList[j].lch;
          if (roomList[j].ldid == tarLd[i].ldid && !seenLchs[lch]) {
            seenLchs[lch] = true;
            lc.push(roomList[j])
          }
        }
        lc.sort(function(a, b) {
          return a.lch.localeCompare(b.lch);
        });
        tarLd[i].lcs = this.getFj(roomList, lc);
      };
      return tarLd;
    },
    getFj(roomList, lc) {
      for (var i = 0; i < lc.length; i++) {
        var fj = [];
        for (var j = 0; j < roomList.length; j++) {
          if (roomList[j].lch == lc[i].lch) {
            fj.push(JSON.parse(JSON.stringify(roomList[j])))
          }
        }
        fj.sort(function(a, b) {
          return a.id + "".localeCompare(b.id + "");
        });
        lc[i].fj = fj;
      }
      return lc;
    },
    cancel() {
      this.open = false;
      this.openIS = false;
      this.bangDopen = false;
      this.reset();
    },
    reset() {
      this.form = {
        id: null,
        roomName: null,
        roomTypeId: null,
        rentablePersonQuantity: null,
        bedNum: null,
        deleteFlg: null,
        isValid: null,
        roomStatus: null,
        topid: null,
        agentsId: null,
        cellId: null,
        unitId: null,
        lch: null
      };
      this.resetForm("form");
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    handleAdd(row) {
      this.reset();
      this.form = row;
      this.form.id = null;
      this.open = true;
      this.updateShow = false;
      this.title = "添加房态管理";
    },
    handleAddIS() {
      this.reset();
      this.getCellList();
      // 修改表单中的校区选择也默认选择第一个
      if (this.cellList.length > 0) {
        this.form.cellId = this.cellList[0].value;
        this.getUnitList(this.cellList[0].value);
      }
      this.openIS = true;
      this.updateShow = false;
      this.title = "添加房态管理";
    },
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getHome(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.updateShow = true;
        this.title = "修改房间";
      });
    },
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateHome(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addHome(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.openIS = false;
              this.getList();
            });
          }
        }
      });
    },
    submitFormSmart() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          updateSmartlocksByMac(this.form).then(response => {
            this.$modal.msgSuccess("绑定成功");
            this.bangDopen = false;
            this.getList();
          });
        }
      });
    },
    handleDelete(row) {
      this.mengban = true;
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除房间编号为"' + ids + '"的数据项？').then(function() {
        return delHome(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 校区选择改变时触发 */
    handleCellChange(value) {
      this.queryParams.unitId = null;
      this.floorList = [];
      if (value) {
        this.getUnitList(value);
      } else {
        this.unitList = [];
      }
      this.getList();
    },
    /** 获取楼层列表 */
    getFloorList() {
      if (!this.queryParams.unitId) {
        this.floorList = [];
        this.activeFloor = '';
        this.queryParams.floorId = null;
        return;
      }
      listFloor2({ unitId: this.queryParams.unitId }).then(response => {
        this.floorList = response.rows;
        // 默认选中第一个楼层
        if (this.floorList.length > 0) {
          const firstFloorId = this.floorList[0].id + '';
          this.activeFloor = firstFloorId;
          this.queryParams.floorId = parseInt(firstFloorId);
        } else {
          this.activeFloor = '';
          this.queryParams.floorId = null;
        }
        this.getList();
      });
    },
    /** 楼栋选择改变时触发 */
    handleUnitChange(value) {
      if (value) {
        this.getFloorList();
      } else {
        this.floorList = [];
        this.activeFloor = '';
        this.queryParams.floorId = null;
      }
      this.getList();
    },
    /** 楼层选择事件 */
    handleFloorSelect(index) {
      this.activeFloor = index;
      this.queryParams.floorId = parseInt(index);
      this.getList();
    },
    /** 楼层滚动 */
    scrollFloor(direction) {
      const scrollbar = document.querySelector('.floor-scrollbar .el-scrollbar__wrap');
      const scrollStep = 100; // 每次滚动的距离

      if (scrollbar) {
        const currentScroll = scrollbar.scrollTop;
        const targetScroll = direction === 'up' ?
          Math.max(0, currentScroll - scrollStep) :
          Math.min(scrollbar.scrollHeight - scrollbar.clientHeight, currentScroll + scrollStep);

        scrollbar.scrollTo({
          top: targetScroll,
          behavior: 'smooth'
        });
      }
    },
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  overflow: hidden;
  height: calc(100vh - 6rem);
  padding: 16px;
  background-color: #f5f7fa;

  .mengban {
    width: 100%;
    height: 100%;
    text-align: center;
    position: absolute;
    line-height: 118px;
    display: flex;
    background: rgba(223, 152, 152, 0.9);
    z-index: 8;
    flex-direction: column;
    justify-content: center;
    border-radius: 4px;
  }
}

// 楼层卡片样式
.floor-card {
  background-color: #fff;
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;

  .floor-title {
    font-size: 16px;
    font-weight: 500;
    color: #303133;
  }
}

.content-wrapper {
  height: calc(100vh - 160px) !important;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #dcdfe6;
    border-radius: 3px;
  }

  &::-webkit-scrollbar-track {
    background-color: #f5f7fa;
  }
}

// 搜索表单样式
.search-form {
  margin-bottom: 16px;
  padding: 16px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

  .el-form-item {
    margin-bottom: 0;
    margin-right: 16px;
  }

  .el-select, .el-input {
    width: 200px;
  }

  .search-btn {
    background-color: #409EFF;
    border-color: #409EFF;

    &:hover, &:focus {
      background-color: #66b1ff;
      border-color: #66b1ff;
    }
  }
}

// 主卡片样式
.main-card {
  background-color: #fff;
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

  .empty-data {
    height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .room-list {
    padding: 8px;
  }

  .card-footer {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
    text-align: center;
  }
}

// 房间卡片样式
.room-card-container {
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-5px);
  }

  .room-card {
    background: #A8A8A8;
    transition: all 0.3s ease;
    height: 110px;
    border: none;
    overflow: hidden;
    position: relative;

    &.rented-background {
	  background: linear-gradient(135deg, #3c7940, #25b813);
      box-shadow: 0 4px 12px rgba(230, 162, 60, 0.25);
    }

    &.vacant-background {
      background: linear-gradient(135deg, #909399, #606266);
      box-shadow: 0 4px 12px rgba(144, 147, 153, 0.25);
    }

    ::v-deep .el-card__body {
      padding: 5px 5px 5px 5px;
    }

    .card-top {
      display: flex;
      justify-content: space-between;
      padding: 4px;
      position: relative;
      height: 32px;
      width: 100%;
    }

    .battery-wrapper {
      width: 50px;
      align-self: flex-start;
      padding-left: 2px;
    }

    .room-status-container {
      display: flex;
      justify-content: flex-end;
      align-self: flex-start;
      margin-left: auto;
      padding-right: 2px;
    }

    .room-status {
      font-size: 12px;
      padding: 2px 8px;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 12px;
      color: #fff;
      margin-left: 8px;
      font-weight: 500;
    }

    .room-footer {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 8px 0;
      text-align: center;

      .room-name {
        font-size: 16px;
        font-weight: 500;
        color: #fff;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        max-width: 90%;
        margin: 0 auto;
        display: inline-block;
      }
    }

    .room-content {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 40px;

      .lock-inactive {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #E6A23C;
        font-size: 14px;
        font-weight: 500;

        i {
          margin-right: 5px;
          font-size: 18px;
        }
      }

      .no-lock {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #909399;
        font-size: 14px;
        font-weight: 500;

        i {
          margin-right: 5px;
          font-size: 18px;
        }
      }
    }
  }
}

// 筛选标签样式
.filter-header {
  border-bottom: 1px solid #ebeef5;
  padding: 0 20px !important;
  background: #fff;
}

.filter-tabs {
  display: flex;
  height: 50px;
  align-items: center;
  gap: 32px;
}

.filter-tab {
  position: relative;
  padding: 0 4px;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  color: #606266;

  &:hover {
    color: #409EFF;
  }

  &.active {
    color: #409EFF;
    font-weight: 500;

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background: #409EFF;
      border-radius: 2px;
    }
  }
}

// 楼层菜单样式
.floor-wrapper {
  position: relative;
  height: calc(100% - 40px);
  display: flex;
  flex-direction: column;
}

.floor-scrollbar {
  flex: 1;
  height: calc(100% - 60px);
  margin: 30px 0;

  ::v-deep .el-scrollbar__wrap {
    overflow-x: hidden;

    &::-webkit-scrollbar {
      width: 0;
      display: none;
    }
  }
}

.scroll-arrow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s;
  color: #909399;
  z-index: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

  &:hover {
    background: #409EFF;
    color: white;
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
  }

  &.up {
    top: 0;
  }

  &.down {
    bottom: 0;
  }
}

.floor-menu {
  border-right: none;

  .el-menu-item {
    text-align: center;
    height: 40px;
    line-height: 40px;
    padding: 0 10px !important;
    font-size: 14px;
    margin: 4px 0;
    border-radius: 4px;
    color: #303133;
    transition: all 0.3s;

    &.is-active {
      background-color: #409EFF;
      color: #fff;
      box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
    }

    &:hover {
      background-color: #ecf5ff;
      color: #409EFF;
    }
  }
}

// 分页容器样式
.pagination-container {
  margin-top: 20px;
  padding: 10px 0;
  // background-color: #fff;
  text-align: center;
  // border-radius: 4px;
  // box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

// 响应式样式优化
@media screen and (max-width: 768px) {
  .search-form {
    .el-select, .el-input {
      width: 100%;
    }

    .el-form-item {
      margin-right: 0;
      margin-bottom: 10px;
      width: 100%;
    }
  }

  .floor-card {
    margin-bottom: 16px;
  }
}
</style>
